﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>后台登录页面</title>
	<meta name="author" content="DeathGhost" />
	<link rel="stylesheet" type="text/css" href="css/dmaku.css" tppabs="css/dmaku.css" />
	<script src="js/jquery.js"></script>
	<script src="js/verificationNumbers.js" tppabs="js/verificationNumbers.js"></script>
	<script src="js/Particleground.js" tppabs="js/Particleground.js"></script>
	 <script src="./lib/layui/layui.js" charset="utf-8"></script>

</head>

<body>
<form action="../AdminLogin">
 <!--   添加隐藏域,传递op -->
<input type="hidden" name="op" value="admin_login">
<dl class="admin_login">
 <dt>
  <strong>QQMusic后台管理系统</strong>
  <em>Management System</em>
 </dt>
 <dd class="user_icon">
  <input type="text" placeholder="手机号" class="login_txtbx" name="mobile"/>
 </dd>
 <dd class="pwd_icon">
  <input type="password" placeholder="密码" class="login_txtbx" name="password"/>
 </dd>
 <dd class="val_icon">
  <div class="checkcode">
    <input type="text" id="J_codetext" placeholder="验证码" maxlength="4" class="login_txtbx">
    <canvas class="J_codeimg" id="myCanvas" onclick="createCode()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
  </div>
  <input type="button" value="验证码核验" class="ver_btn" onClick="validate();">
 </dd>
 <dd>
 	 <input type="checkbox" name="rememberme" value="rememberme">
 	 <label> 记住密码</label> 
 </dd>
 <dd>
  <input type="submit" value="立即登陆" class="submit_btn" disabled = "disabled" id="login"/>
 </dd>
</dl>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
</form>
</body>
	<script>
	$(document).ready(function() {
	  //粒子背景特效
	  $('body').particleground({
		dotColor: '#5cbdaa',
		lineColor: '#5cbdaa'
	  });
	  //验证码
	  createCode();
	  // 登录失败提示
		var message = "${param.message}";
		if(message == "fail"){
			 layui.use('layer', function(){
				layer.msg('用户名或密码错误!',{icon:2,time:2000});
			 });
		}
		// 获取"rememberMe"cookie信息
		var rememberMeValue = getCookie("rememberMe");
		if(rememberMeValue!=""){
			var vs = rememberMeValue.split("=");
			$("input[name='mobile']").val(vs[0]);
			$("input[name='password']").val(vs[1]);
			$("input[name='rememberme']").prop("checked",true);
		}else{
			$("input[name='rememberme']").prop("checked",false);
		}
		// 当用户访问登录页面的时候，输入用户名失去焦点如果有对应的cookie则显示在指定密码位置上,并设置复选框为选中状态
		$("input[name='mobile']").blur(function(){
			// 用户输入的账号
			var mobile = $(this).val();
			// 获取rememberMe cookie的值,15065958096=123456
			var rememberMeValue = getCookie("rememberMe");
			var vs = rememberMeValue.split("=");
			// 对比值的第一个元素是否和用户输入的账号一致
			if(vs[0]==mobile){
				$("input[name='password']").val(vs[1]);
				$("input[name='rememberme']").prop("checked",true);
			}else{
				$("input[name='password']").val("");
				$("input[name='rememberme']").prop("checked",false);
			}
		})
	});
	
	function validate () {
	    var inputCode = document.getElementById("J_codetext").value.toUpperCase();
	    var codeToUp=code.toUpperCase();
	    if(inputCode.length <=0) {
	      document.getElementById("J_codetext").setAttribute("placeholder","输入验证码");
	      createCode();
	      return false;
	    }
	    else if(inputCode != codeToUp ){
	      document.getElementById("J_codetext").value="";
	      document.getElementById("J_codetext").setAttribute("placeholder","验证码错误");
	      createCode();
	      return false;
	    }
	    else {
	      document.getElementById("J_codetext").value=inputCode;
		  layui.use('layer', function(){
			layer.msg('验证码正确!',{icon:1,time:1000});
		  });
		  document.getElementById("login").disabled=false;
	      return true;
	    }
	}
	// 使用通用函数获取指定cookie名的值
	  function getCookie(cname){
		  var name = cname + "=";  // 
		  var ca = document.cookie.split(';'); // 字符串根据;切割成数组
		  for(var i=0; i<ca.length; i++){      // 遍历数组
		    var c = ca[i].trim();
		    if (c.indexOf(name)==0) {
		    	return c.substring(name.length,c.length); 
		    }
		  }
		  return "";
	   }
	</script>
</html>
